<template>
  <div class="login-container">
    <LogReg>
      <template slot="input_slot">
        <div id="title">
          <h1 style="font-weight: 500">{{ $t('u.logTitle') }}</h1>
        </div>
        <div id="username">
          <div id="user-box">
            <v-main>
              <Example @phoneNumber="phoneNumber" :removeNumber="phone.number"></Example>
            </v-main>
            <div style="width: 7%">
              <van-icon name="checked" v-show="phone.valid" color="#a7ed5a" />
              <van-icon name="clear" v-show="!phone.valid && phone.number" @click="phone.number = ''" color="#ff4d50" />
            </div>
          </div>
        </div>
        <div id="password">
          <div id="pwd-box">
            <!-- OTP login -->
            <van-field v-model="smscode" type="digit" v-show="loginMode" :placeholder="$t('u.OTPmsg')" maxlength="6" style="font-size: 1em" />
            <span v-show="loginMode" style="width: 40%; text-align: center; font-size: 0.9em; color: #ffbf05">{{ $t('u.sendOTP') }}</span>
            <!-- password login -->
            <van-field v-model="password" :type="pwdShow ? 'password' : 'digit'" v-show="!loginMode" :placeholder="$t('u.PWDmsg')" style="font-size: 1em" />
            <div v-show="!loginMode" style="width: 15%; text-align: center; font-size: 1.5em; color: #ffbf05">
              <van-icon name="closed-eye" v-show="pwdShow" @click="pwdShow = false" />
              <van-icon name="eye-o" v-show="!pwdShow" @click="pwdShow = true" />
            </div>
          </div>
        </div>
        <div id="logReg-btn">
          <van-button type="primary" block @click="login">{{ $t('u.login') }}</van-button>
        </div>
        <div id="log-mode">
          <a href="javascript:;" @click="loginMode = !loginMode" style="font-size: 0.9em; margin-left: 1em">{{ loginMode ? $t('u.password') : $t('u.OTP') }}</a>
        </div>
      </template>
      <template slot="shift_slot">
        <div @click="$router.push('/register')">
          <van-button block
            ><span>{{ $t('u.goRegister') }}</span
            ><span style="color: #ffbf05">{{ $t('u.register') }}</span></van-button
          >
        </div>
        <span class="beian-info">
          <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2022004579号-1</a>
        </span>
      </template>
    </LogReg>
  </div>
</template>

<script>
import LogReg from './index'
import Example from '@/components/Example.vue'

export default {
  name: 'Login',
  components: { LogReg, Example },
  data() {
    return {
      pwdShow: true,
      loginMode: true,
      password: '000000',
      smscode: '000000',
      phone: {
        number: '',
        valid: false,
        country: undefined
      }
    }
  },
  methods: {
    phoneNumber(val) {
      this.phone = val
    },
    login() {
      var number = this.phone.number
      var OTP = this.smscode
      var pass = this.phone.valid
      if (!number) return this.$msg.danger(this.$t('u.TELmsg'))
      if (!pass) return this.$msg.danger(this.$t('u.TELwarn'))
      if (OTP.length === 0 && this.loginMode) return this.$msg.danger(this.$t('u.OTPmsg'))

      var tel = number.split(' ').join('')
      var pwd = this.password
      if (pwd.length === 0 && !this.loginMode) return this.$msg.danger(this.$t('u.PWDmsg'))

      var params = new URLSearchParams()
      params.append('username', tel)
      params.append('password', pwd)
      // 发起登录请求
      this.$load.start()
      this.$store.dispatch('login', params).then(msg => {
        if (msg) return this.$toast.fail(this.$t('u.logFail'))
        this.$router.push('/home')
        console.log('登陆成功')
        this.$load.done()
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
